<template>
	<view class="shop-details">
		<NavBar title="商户详情"/>
		<view class="content">
			<view class="user-info">
				<view class="item">
					<view class="label"> 联系人姓名 </view>
					<view class="value"> {{shopInfo.contacts}} </view>
				</view>
				<view class="item">
					<view class="label"> 联系人电话 </view>
					<view class="value"> {{shopInfo.mobile}} </view>
				</view>
			</view>
			<view class="shop-info">
				<view class="item">
					<view class="label"> 商家名称 </view>
					<view class="value"> {{shopInfo.name}} </view>
				</view>
				<view class="item">
					<view class="label"> 商家描述 </view>
					<view class="value"> {{shopInfo.describe_text}} </view>
				</view>
				<view class="item">
					<view class="label"> 主营类目 </view>
					<view class="value"> {{shopInfo.category_name}} </view>
				</view>
				<view class="item">
					<view class="label"> 店铺坐标 </view>
					<view class="value"> {{shopInfo.region}} </view>
				</view>
				<view class="item">
					<view class="label"> 店铺地址 </view>
					<view class="value"> {{shopInfo.detail_address}} </view>
				</view>
				<view class="item">
					<view class="label"> 客服电话 </view>
					<view class="value"> {{shopInfo.help_mobile}} </view>
				</view>
			</view>
			<view class="shop-intro">
				<view class="item">
					<view class="label"> 商家简介 </view>
				</view>
				<view class="intro">
					<view class="value"> {{shopInfo.intro}} </view>
				</view>
			</view>
			<view class="shop-logo">
				<text class="title"> 商家logo </text>
				<view class="img">
					<image :src="shopInfo.logo"  class="i-img"/>
				</view>
			</view>
			<view class="shop-img">
				<text class="title"> 商家门店照片(3-5张) </text>
				<view class="img">
					<image :src="item.url" v-for="item in shopInfo.head_imgs" :key="item" class="i-img"/>
				</view>
			</view>
			<view class="zmcl">
				<text class="title"> 证明材料(营业执照) </text>
				<view class="img">
					<image :src="item.url" v-for="item in shopInfo.business_license" :key="item" class="i-img"/>
				</view>
			</view>
			<view class="id-box">
				<view class="id-name"> 上传证件 </view>
				<view class="id-img">
					<view class="id-item">
						<image :src="shopInfo.id_img_1" :style="{height:h}" class="ii-img"/>
						<view class="text"> 身份证正面 </view>
					</view>
					<view class="id-item">
						<image :src="shopInfo.id_img_2" :style="{height:h}"  class="ii-img"/>
						<view class="text"> 身份证反面 </view>
					</view>
					<view class="id-item">
						<image :src="shopInfo.id_img_3" :style="{height:h}" class="ii-img"/>
						<view class="text"> 手持身份证 </view>
					</view>
				</view>
			</view>
			<view class="user-pwd">
				<view class="link-box">
					<view class="link-top">
						<view class="link-name"> 后台链接地址 </view>
						<view class="link-copy" @tap="copyLink(shopInfo.admin_user)"> 复制链接 </view>
					</view>
					<view class="link"> {{shopInfo.admin_user}} </view>
				</view>
				<view class="item">
					<view class="label"> 登陆账号 </view>
					<view class="value"> {{shopInfo.username}} </view>
				</view>
				<view class="item">
					<view class="label"> 登陆密码 </view>
					<view class="value"> {{shopInfo.password}} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	const { safeArea } = uni.getSystemInfoSync()
	const h = computed(() => ((safeArea.width - 66) / 2) / 1.56 + 'px' )
	const shopInfo = ref()
	const copyLink = (data) => {
		uni.setClipboardData({
			data,
			success:() => getApp().globalData.toast('复制成功')
		});
	}
	onLoad((e) => {
		const { info } = e
		shopInfo.value = JSON.parse(info)
		console.log(shopInfo.value);
	})
</script>

<style lang="scss" scoped>
	.shop-details {
		.content {
			width: 100%;
			padding: 10px 12px;
			box-sizing: border-box;
			.user-info, .shop-info,.shop-intro {
				padding: 0 16px;
				border-radius: 10px;
				background-color: #fff;
				margin-bottom: 10px;
				.item {
					height: 50px;
					font-weight: 400;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #eeeeee;
					box-sizing: border-box;
					&:nth-last-of-type(1) {
						border-bottom: 0;
					}
					.label {
						color: #333333;
						font-size: 16px;
					}
					.value {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
					}
				}
			}
			.shop-intro {
				.item {
					height: 40px;
					border-bottom: 0;
					padding-top: 16px;
				}
				.intro {
					padding: 5px 0 10px;
					.value {
						width: 100%;
						font-weight: 400;
						font-size: 14px;
						color: #C4C4C4;
						line-height: 20px;
					}
				}
			} 
			.shop-logo, .shop-img, .zmcl{
				padding: 20px 16px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				box-sizing: border-box;
				.title {
					color: #333333;
					font-size: 16px;
				}
				.img {
					margin-top: 15px;
					.i-img {
						width: 74px;
						height: 74px;
						margin-right: 20px;
						border-radius: 10px;
					}
				}
			}
			.id-box {
				padding: 20px 16px 10px;
				border-radius: 10px;
				background-color: #fff;
				margin-bottom: 10px;
				.id-name {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 20px;
					margin-bottom: 19px;
				}
				.id-img {
					display: grid;
					gap: 11px 10px;
					grid-template-columns: repeat(2, 1fr);
					.id-item {
						.ii-img {
							width: 100%;
							margin-bottom: 6px;
						}
						.text {
							color: #999999;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
							text-align: center;
						}
					}
				}
			}
			.user-pwd {
				padding: 15px 16px 0;
				background-color: #fff;
				border-radius: 10px;
				.link-box {
					padding-bottom: 11px;
					border-bottom: 1px solid #eeeeee;
					.link-top {
						display: flex;
						font-weight: 400;
						line-height: 20px;
						margin-bottom: 4px;
						align-items: center;
						justify-content: space-between;
						.link-name {
							color: #333333;
							font-size: 16px;
						}
						.link-copy {
							font-size: 14px;
							color: #008FF4;
						}
					}
					.link {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
						line-height: 20px;
					}
				}
				.item {
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&:nth-last-of-type(1) {
						box-sizing: border-box;
						border-top: 1px solid #eeeeee;
					}
					.label {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
					}
					.value {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>
